<template>
    <div>
        <Card>
            <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
            <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
        </Card>
    </div>
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
    name: 'TablesPage',
    components: {
        Tables
    },
    data () {
        return {
            columns: [
                { title: 'Name', key: 'name', sortable: true },
                { title: 'Email', key: 'email', editable: true },
                { title: 'Create-Time', key: 'createTime' },
                {
                    title: 'Handle',
                    key: 'handle',
                    options: ['delete'],
                    button: [
                        (h, params, vm) => {
                            return h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: '你确定要删除吗?'
                                },
                                on: {
                                    'on-ok': () => {
                                        vm.$emit('on-delete', params)
                                        vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                                    }
                                }
                            }, [
                                h('Button', '自定义删除')
                            ])
                        }
                    ]
                }
            ],
            tableData: []
        }
    },
    methods: {
        handleDelete (params) {

        },
        exportExcel () {
            this.$refs.tables.exportCsv({
                filename: `table-${(new Date()).valueOf()}.csv`
            })
        }
    },
    mounted () {
        getTableData().then(res => {
            this.tableData = res.data
        })
    }
}
</script>

<style>

</style>
